<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<hr>
姓名：<input type="text" id="name">
<button id="btn">签到</button>
<div id="Zero">
    <b>未签到</b>
</div>
<hr>
<div id="One">
    <b>已签到</b>
</div>
</body>
<script type="text/javascript" src="/webjars/jquery/3.1.1/jquery.js"></script>
<script>
    $(function () {
        $.ajax({
            type:"post",
            url:"/select",
            data:{
            },
            async:true,
            dataType:"json",
            success:function (data) {
                $.each(data.One,function (index,item) {
                    var one="<p>"+item.name+"</p>"
                    $("#One").append(one)
                    console.log(item.name)
                })
                $.each(data.Zero,function (index,item) {
                    var zero="<p>"+item.name+"</p>"
                    $("#Zero").append(zero)
                    console.log(item.name)
                })
            }
        },JSON)

        $("#btn").click(function () {
            $.ajax({
                type:"post",
                url:"/update",
                data:{
                    name:$("#name").val()
                },
                async:true,
                dataType:"json",
                success:function (data) {
                    console.log(data)
                    location.reload();
                }
            },JSON)
        })
    })
</script>
</html>